<template>
	<view class="content">
		<navTop></navTop>
		<btmBack></btmBack>
		<scroll-view scroll-y class="scrollBox">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">基本折线图</view>
			</view>

			<view class="qiun-charts">
				<!--#ifdef MP-ALIPAY -->
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				<!--#endif-->
				<!--#ifndef MP-ALIPAY -->
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA"
				 @touchend="touchEndLineA"></canvas>
				<!--#endif-->
			</view>

			<view v-if="tableList.series.length != 0" class="mtableBox">
				<mtable :tableList="tableList"></mtable>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import mtable from "@/components/mytable/mtable.vue";
	import uCharts from '@/components/u-charts/u-charts.js';
	import day from '@/jsondata/fund/day.js';
	import achievement from '@/jsondata/fund/achievement.js';
	import navTop from '@/components/navTop.vue';
	import btmBack from '@/components/btmBack.vue';
	var _self;
	var canvaLineA = null;
	var lastMoveTime = null; //最后执行移动的时间戳

	export default {
		components: {
			navTop,
			btmBack,
			mtable
		},
		data() {
			return {
				tableList: {}, //表格
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// let res = day.res;
				// let LineA={categories:[],series:[]};
				// //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// LineA.categories=res.data.LineA.categories;
				// LineA.series=res.data.LineA.series;
				// _self.textarea = JSON.stringify(res.data.LineA);
				// _self.showLineA("canvasLineA",LineA);
				let that = this;
				let res = day.res;
				res = achievement.res;
				that.tableList = res.data.LineA;
				let LineA = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				LineA.categories = res.data.LineA.categories;
				LineA.series = res.data.LineA.series;

				//第二根线为虚线的设置
				LineA.series[1].lineType = 'dash';
				LineA.series[1].dashLength = 100;
				_self.textarea = JSON.stringify(res.data.LineA);
				_self.showLineA("canvasLineA", LineA);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					colors: ['#facc14', '#f04864', '#8543e0', '#90ed7d'],
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						//disableGrid:true
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						line: {
							type: 'straight'
						}
					}
				});

			},
			touchLineA(e) {
				lastMoveTime = Date.now();
			},
			moveLineA(e) {
				let currMoveTime = Date.now();
				let duration = currMoveTime - lastMoveTime;
				if (duration < Math.floor(1000 / 60)) return; //每秒60帧
				lastMoveTime = currMoveTime;

				let currIndex = canvaLineA.getCurrentDataIndex(e);
				if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
					let riqi = canvaLineA.opts.categories[currIndex];
					let leibie = canvaLineA.opts.series[0].name;
					let shuju = canvaLineA.opts.series[0].data[currIndex];
					this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
				}
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchEndLineA(e) {
				let currIndex = canvaLineA.getCurrentDataIndex(e);
				if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
					let riqi = canvaLineA.opts.categories[currIndex];
					let leibie = canvaLineA.opts.series[0].name;
					let shuju = canvaLineA.opts.series[0].data[currIndex];
					this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
				}
				canvaLineA.touchLegend(e);
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
		}

	}
</script>

<style lang="scss">
	page,
	.content {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: $page-color-base;
	}
	.scrollBox{
		width: 100%;
		height: 100%;
		background-color: $uni-color-white;
	}
	.mtableBox{
		margin: 10upx 20upx;
		width: 100%;
	}
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
